import React from 'react';
import PropTypes from 'prop-types';
import {WingBlank, Progress} from 'antd-mobile';
import styles from './Recentlearn.css';
const Recentlearn = ({pic,title,brief,progress}) => {
  const imgstyle = {
      backgroundImage: "url(" + pic + ")"
  }

  return (
    <WingBlank>
    <div className = {styles.card}>
        <div className = {styles.head} style={imgstyle}>
            <div className = {styles.placeholds}>
                <span> </span>
            </div>
        </div>
        <div className = {styles.title}>
            <span>
            {title}
            </span>
            <div className = {styles.progressblock}>
            <span>
                已学完{progress}%
            </span>
            <Progress percent={progress} position="normal" />
            </div>
        </div>
        <div className = {styles.buttonwrap}>
            继续学习
        </div>
    </div>
    </WingBlank>
  );
};

Recentlearn.propTypes = {
    title: PropTypes.string,
    content: PropTypes.string,
    price: PropTypes.number

};

export default Recentlearn;
